<script setup></script>
<template>
    <div class="header">
        <span @click="$router.back()">
            <van-icon name="arrow-left" />
        </span>
        <span>详情</span>
        <span></span>
    </div>
    <div class="main">
        <div class="message">
            <div class="top">
                <span>运费已到账</span>
                <span>2023-12-12 12:12</span>
            </div>
            <div class="bottom">
                <span>您的订单：2023121201，从石家庄到北京的货物订单已经支付成功，请注意查收。</span>
            </div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.main {
    background-color: #f2f2f2;
    height: calc(100% - 1rem);
}

.header {
    height: 1rem;
    background-color: #1678ff;
    font-size: 0.2rem;
    color: white;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 0.1rem 0.1rem 0.1rem;
    box-sizing: border-box;
}

.message {
    width: 90%;
    margin: 0.1rem 5%;
    font-size: 0.16rem;

    .top {
        border-radius: 0.1rem 0.1rem 0 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: white;
        padding-top: 0.1rem;
    }

    .bottom {

        color: gray;
        height: 0.5rem;
        background-color: white;
        padding: 0.1rem;
        border-radius: 0 0 0.1rem 0.1rem;
    }
}
</style>